
<template>
<el-card>
    <my-search v-model="pgData" @search="doSearch">
        <span style="margin-right:10px">
            <el-radio-group v-model="pgData.itemStatus" size="small">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="1">已结算</el-radio-button>
                <el-radio-button label="2">结算中</el-radio-button>
            </el-radio-group>
        </span>

        <el-form-item  slot="time" >
            <el-date-picker
                v-model="valuetime"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker> 
        </el-form-item>

        <el-form-item  slot="title" >
            <el-input  v-model="pgData.itemName" placeholder="清单名称" clearable></el-input>
        </el-form-item>
        <span slot="dr" class="title_btns">
            <el-button size="small" type="success" icon="el-icon-plus" @click="applyJS">申请结算</el-button>
        </span>
    </my-search>
    <div class="amount_area">
        <!-- <span>已审核通过合计：{{"-"}} 元</span> -->
    </div>
    <el-table :data="tableData" :height="tableHeight" border :cell-style="{padding: '5px'}">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="itemName" label="清单名称" ></el-table-column>
        <el-table-column prop="settStart" label="开始日期" >
            <template slot-scope="scope" >
                {{scope.row.settStart ? scope.row.settStart.slice(0,10) : '-'}}
            </template>
        </el-table-column>
        
        <el-table-column prop="settEnd" label="截止日期" >
            <template slot-scope="scope" >
                {{scope.row.settEnd ? scope.row.settEnd.slice(0,10) : '-'}}
            </template>
        </el-table-column>

        <el-table-column prop="settAmount" label="结算总额（元）" ></el-table-column>
        <el-table-column prop="itemAmount" label="费用总额（元）" ></el-table-column>
        <el-table-column prop="appTime" label="创建时间" min-width="120"></el-table-column>
        <el-table-column prop="itemStatus" label="状态" >
            <template slot-scope="scope" >
                <el-tag v-if="scope.row.itemStatus == '1'" type="success" size="small">已结算</el-tag>
                <el-tag v-if="scope.row.itemStatus == '2'"  size="small">结算中</el-tag>
            </template>
        </el-table-column>
         <el-table-column prop="appUserName" label="创建人"></el-table-column>
    
        <el-table-column prop="" label="操作" min-width="140">
            <template slot-scope="scope" >
                <el-button type="text"  @click="goDetail(scope.row)">清单详情</el-button>
                <!-- <el-button type="text"  @click="kjInvoice(scope.row)">开具发票</el-button> -->
                <el-button type="text"  @click="opemChildlist(scope.row)">查看子清单</el-button>
                <el-button type="text"  @click="delInventory(scope.row)" v-show="scope.row.itemStatus != '1'">删除</el-button>
            </template>
        </el-table-column>
        <div slot="empty">
            <p style="font-size:17px" v-if="tableData.length == 0 && (pgData.itemStatus == '1' || pgData.itemStatus == '2')">暂无数据</p>
            <p style="font-size:17px" v-else>您还未添加结算清单~ 请点击<a style="color:#6498ff;" @click="applyJS">申请结算</a>添加结算清单</p>
        </div>
 
    </el-table>

    <my-pagination
        ref="page"
        v-model="tableData"
        :action="$store.getters.settUrl + '/settItem'"
        :search="pgData">
    </my-pagination>

    <!-- 申请结算-->
    <my-dialog
        :title="formTitle"
        :width="'1000px'"
        v-model="dialogApplyVisible">
        <applysettItem ref="apply" v-if="dialogApplyVisible" @close="dialogApplyVisible = false"  ></applysettItem>
    </my-dialog>
    

    <!-- 查看子清单-->
    <my-dialog
        class="childlist"
        :title="formTitle"
        :width="'1056px'"
        v-model="dialogChildVisible">
        <childlist ref="childlist" v-if="dialogChildVisible" @close="dialogChildVisible = false" :rowguid="rowguid"></childlist>
    </my-dialog>

    <!-- 开具发票-->
    <my-dialog
        class="invoice"
        :title="formTitle"
        :width="'60%'"
        v-model="dialogInvoiceVisible">
        <invoice ref="invoice" v-if="dialogInvoiceVisible" @close="dialogInvoiceVisible = false" ></invoice>
    </my-dialog>

</el-card>

</template>

<script>
import LIST_MIXIN from '@mixins/list-page'
import applysettItem from './applysettItem'
import childlist from './childlist.vue'
import invoice from './invoice'


export default {
    mixins: [ LIST_MIXIN ],
    props:[],
    components:{applysettItem,childlist,invoice},
    data: function(){
        return{
            pgData:{
                itemStatus:'',
                settStart:'',
                settEnd:'',
            },
            tableData:[],
            dialogApplyVisible:false,
            dialogChildVisible:false,
            dialogInvoiceVisible:false,
            formTitle:'',
            rowguid:'',
            token:''
        }
    }, 
    computed:{
        valuetime:{
            get:function(){
                var startTime = this.pgData.settStart || '';
                var endtime = this.pgData.settEnd || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.settStart = '' ;
                    this.pgData.settEnd = '';
                }else{
                    var startTime = val[0] || '';
                    var endtime = val[1] || '';
                    this.pgData.settStart = startTime;
                    this.pgData.settEnd = endtime;
                }
            },
        }  
    },
    watch:{
        dialogApplyVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
        dialogChildVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
        dialogInvoiceVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
        'pgData.itemStatus':function(n,o){
            if(n != o){
                this.$refs.page.reload();
            }
        }
    },

    methods: {
        doSearch:function(){
            this.$refs.page.queryData();
        },
        //申请结算
        applyJS:function(){
            this.dialogApplyVisible = true;
            this.formTitle = '申请结算';
        },
        //删除清单
        delInventory:function(row){
            var that = this;
            ShowConfirm('删除后需重新添加结算清单，是否确定？' , 'warning', function() {
                that.$delete(that.$store.getters.settUrl + '/settItem/'+row.rowguid,{},function(data){
                    ShowMsg('删除成功','success');
                    that.doSearch();
                })
            }, function() {
                  ShowMsg('已取消删除操作','info');
            })
        },
        //跳转详情
        goDetail:function(row){
            if(this.getQuery('token')){
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.rowguid,
                        token:this.getQuery('token')
                    }
                })
            }else{
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.rowguid
                    }
                }) 
            }
        },
        //子清单
        opemChildlist:function(row){
            this.dialogChildVisible = true;
            this.formTitle = '子清单';
            this.rowguid = row.rowguid;
        },
        //开具发票
        kjInvoice:function(){
            this.dialogInvoiceVisible = true;
            this.formTitle = '开具发票'
        },



    },
    mounted() {

    }
}
</script>

<style scoped lang="scss">
.title_btns{
    float: right;
}
.amount_area{
    text-align: right;
    padding-bottom: 10px;
}
.childlist{
    ::v-deep  .el-dialog__body {
       padding-top: 10px;
    }
}

::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table .cell {
    text-align: center;
}   


</style>
